import React, { Component } from 'react';
import { StyleSheet, View,ImageBackground,Text,StatusBar,
    Dimensions,Image,TextInput,TouchableWithoutFeedback  } from 'react-native';

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import { connect } from 'react-redux';
import * as ReduxAction from './redux/action';
import PhotoActionSheet from '../component/PhotoActionSheet';

import AppStyle from '../styles/index';
import {txt,view} from '../comm/Size';

import {Tool} from "../comm/util";
const { width, height } = Dimensions.get("window");

import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view';
import Icon from 'react-native-vector-icons/Ionicons';

import Action from '../comm/action';


class EventItem extends Component {
    constructor(props) {
        super(props);
        this.cache = {
            recordId: this.props.recordId
        }
        this.state = {
            image: "",
            remark: ""
        }
    }


    takePhoto = ()=> {
        this.ActionSheet.showActionSheet();
    }

    onSuccess = (path)=> {
        const {uuid,loadTask,remark}=this.props;
        var rid = this.cache.recordId || 0;
        var body = null;
        if (rid == 0) {
            body = {
                "create_id": 1000,
                "task_id": uuid,
                "task_image": path
            }
        } else {
            body = [path, remark, rid];
        }
        Action.updateTask(rid, {data: body}).then(res=> {
            if (res.data != "success") {
                this.cache.recordId = res.data;
            }
            this.setState({
                image: path
            })
            loadTask();
        })
    }

    updataRemark = ()=> {
        const {uuid,loadTask,image}=this.props;
        var rid = this.cache.recordId || 0;
        var body = null;
        if (rid == 0) {
            body = {
                "create_id": 1000,
                "task_id": uuid,
                "task_descr": this.state.remark
            }
        } else {
            body = [image, this.state.remark, rid];
        }
        Action.updateTask(rid, {data: body}).then(res=> {
            if (res.data != "success") {
                this.cache.recordId = res.data;
            }
            loadTask();
        })
    }

    loadData() {

    }

    render() {
        let source = "";
        let {image,title,remark,recordId}=this.props;
        this.cache.recordId = recordId;
        remark = this.state.remark || remark;
        image = this.state.image || image;
        if (image) {
            source = {uri: image}
        } else {
            source = require("../assets/ph.png");
        }
        return (
            <KeyboardAwareScrollView ref='scroll'>
                <View style={styles.image}>
                    <Image resizeMode="stretch" source={source} style={styles.info}>
                        <View style={styles.txtWrap}>
                            <Text numberOfLines={2} adjustsFontSizeToFit={true} style={styles.txtTitle}>{title}</Text>
                            <View>
                                <TextInput style={styles.txtMark}
                                           underlineColorAndroid="transparent"
                                           placeholder="你可以点击输入描述信息..."
                                           value={remark}
                                           onSubmitEditing={this.updataRemark}
                                           onChangeText={(remark) => this.setState({remark})}/>
                            </View>
                        </View>
                    </Image>
                    <View style={styles.btnTool}>
                        <View style={styles.cbtn}>
                            <TouchableWithoutFeedback onPress={this.takePhoto}>
                                <View style={styles.cbtnInner}>
                                    <Icon name="ios-camera" size={30} color={AppStyle.mainColor}/>
                                </View>
                            </TouchableWithoutFeedback>
                        </View>
                    </View>
                </View>
                <PhotoActionSheet
                    ref={o=>this.ActionSheet=o}
                    title="记录一张照片"
                    onSuccess={this.onSuccess}
                />
            </KeyboardAwareScrollView>
        )
    }
}

class DetailPage extends Component {

    static navigationOptions = {
        title: '我的清单',
        headerStyle: {
            height: 32,
            backgroundColor: AppStyle.mainColor
        },
        headerTintColor: "#FFF"
    }

    constructor(props) {
        super();
    }

    render() {

        return (
            <View style={styles.container}>

                <ScrollableTabView
                    initialPage={0}
                    tabBarUnderlineStyle={{display:'none'}}
                    tabBarActiveTextColor="#fb6320"
                    renderTabBar={() => <ScrollableTabBar style={{display:"none"}}/>}
                >
                    <EventItem {...this.props}  {...this.props.navigation.state.params.item}></EventItem>
                </ScrollableTabView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: AppStyle.grayColor,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 10,
        paddingBottom: 10,
    },
    keyPad: {
        justifyContent: 'center',
        paddingTop: 0
    },
    info: {
        height: height * 0.7,
        width: width,
        backgroundColor: "#FFF",
    },

    txtWrap: {
        height: view(180),
        backgroundColor: "#FFF",
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0
    },
    txtTitle: {
        paddingLeft: view(10),
        paddingRight: view(30),
        fontSize: txt(14),
        color: "#333",
        marginVertical:view(20)
    },
    txtMark: {
        fontSize: txt(12),
        color: "#999",
        padding: 0,
        paddingLeft: view(10)
    },
    cbtn: {
        width: view(120),
        height: view(120),
        borderRadius: view(120),
        backgroundColor: "#CCC",
        marginLeft: 20,
        marginRight: 20,
        justifyContent: "center",
        alignItems: "center",
    },
    cbtnInner: {
        width: view(100),
        height: view(100),
        borderRadius: view(100),
        backgroundColor: "#FFF",
        justifyContent: "center",
        alignItems: "center",
    },
    btnTool: {
        height: view(140),
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "row",
        marginTop: 10
    }
})

const mapState=state=>{
    return {}
}

export default connect(mapState, ReduxAction)(DetailPage);